<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 表单标签 from action 提交表单信息的服务器 -->
      <form action="test.php" method="post">
      <!-- 明文输入框 -->
      用户名:<input type="text" name="username">
      <!-- 暗纹输入框 -->
      密码：<input type="password" name="password"><br>
      <!-- br强制换行 -->
      <!-- 单选按钮 -->
      性别:
       <label for="male">
       男：<input id="male" type="radio" name="gender" value="male">
       </label>
       <label>
       女：<input type="radio" checked name="gender" value="famale">
       </label><br>
       爱好：
       游泳：<input type="checkbox" name="hobbies" value="swimming">
       <!-- checked设置选中 -->
       篮球：<input type="checkbox" checked name="hobbies" value="basketball">
       足球：<input type="checkbox" name="hobbies" value="football"><br>
       出生日期：<input type="datetime-local" name="birth">
       <input type="date">
       <input type="color"><br>
       <!-- 下拉框 select  -->
      城市：
      <select name="city">
        <!-- 给下拉选项进行分类 -->
         <optgroup label="一线城市">
          <option value="lanzhou">兰州</option>
          <option value="tianshui">天水</option>
          <!-- 下拉框设置选中 selected -->
          <option value="zhangye" selected>张掖</option>
         </optgroup>
         <!-- disabled设置禁用 -->
         <optgroup label="二线城市" disabled>
         <option value="beijing">北京</option>
         <option value="shanghai">上海</option>
         <option value="guangzhou">广州</option>
         </optgroup>
      </select><br>
      描述：<textarea name="des" cols="30" rows="10"></textarea>
      滑块：<input type="range" min="0" max="100" step="10">
      进度条：<progress value="70" max="100" min="0"></progress><br>
      <!-- 表单提交按钮 提交到表单服务器 -->
      上传文件：<input type="file" name="photo">
      提交按钮：<input type="submit" value="提交">
     </form>
</body>
</html>